/**
 * @file: 门店基本信息模块
 * @author: Lengxx
 * @date: 2024-07-15
 */
<template>
  <div class="bg-[#181c41] rounded p-4 pb-8 flex-grow">
    <div class="font-600 text-blue-300 mb-4">门店信息</div>
    <div>{{ props.name }}</div>

    <div class="flex space-x-2 mt-4">
      <div class="flex-1 flex flex-col items-center">
        <div class="icon-wrapper income-icon"></div>
        <div class="text-[16px] font-800 text-blue-300">{{ props.income }}</div>
      </div>
      <div class="flex-1 flex flex-col items-center">
        <div class="icon-wrapper order-icon"></div>
        <div class="text-[16px] font-800 text-blue-300">{{ props.orders }}</div>
      </div>
      <div class="flex-1 flex flex-col items-center">
        <div class="icon-wrapper star-icon"></div>
        <div class="text-[16px] font-800 text-orange-300">{{ props.stars }}</div>
      </div>
    </div>

    <div class="mt-8">
      <div class="font-600 text-red-800 mb-4">今日信息</div>
      <div class="grid grid-cols-2 mt-8">
        <div class="baseinfo-item">
          <SvgIcon name="income" size="40"  />
          <div class="mt-4">625 <span class="text-[14px]">元</span></div>
        </div>
        <div class="baseinfo-item">
          <SvgIcon name="orderNum" size="40"  />
          <div class="mt-4">预定 6 <span class="text-[14px]">单</span></div>
        </div>
        <div class="baseinfo-item">
          <SvgIcon name="roomNum" size="40"  />
          <div class="mt-4">使用 4 <span class="text-[14px]">间</span></div>
        </div>
        <div class="baseinfo-item">
          <SvgIcon name="roomNum" size="40"  />
          <div class="mt-4">剩余 2 <span class="text-[14px]">间</span></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {} from 'vue'
import { SvgIcon } from '@/components/Icon'

const props = defineProps({
  name: {
    type: String,
    default: '北碚城南广场店'
  },
  income: {
    type: Number,
    default: 23250.30
  },
  orders: {
    type: Number,
    default: 122
  },
  stars: {
    type: Number,
    default: 89
  }
})

</script>

<style lang="less" scoped>

.icon-wrapper {
  width: 48px;
  height: 48px;
}

.income-icon {
  background: url('@/assets/images/incomes.png') center no-repeat;
  background-size: cover;
}

.order-icon {
  background: url('@/assets/images/orders.png') center no-repeat;
  background-size: 32px 32px;
}

.star-icon {
  background: url('@/assets/images/star.png') center no-repeat;
  background-size: 28px;
}

.baseinfo-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: red;
  font-size: 16px;
  font-weight: 800;
}
</style>
